import React, { Component } from 'react'
import { Text, StyleSheet, View, FlatList, StatusBar, RefreshControl } from 'react-native'

export default class FlatListDemo extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      isLoading: false,
      list: [
        {
          id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
          title: 'First Item',
        },
        {
          id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
          title: 'Second Item',
        },
        {
          id: '58694a0f-3da1-471f-bd96-145571e29d72',
          title: 'Third Item',
        },
        {
          id: '58694a0f-3da1-471f-bd96-145571e12372',
          title: 'Fourth Item',
        },
        {
          id: '58694a0f-3da1-471f-bd96-145571e34572',
          title: 'Fifth Item',
        },
        {
          id: '5869123f-3da1-471f-bd96-145571e12372',
          title: 'Sixth Item',
        },
        {
          id: '5869345f-3da1-471f-bd96-145571e34572',
          title: 'Seventh Item',
        },
      ]
    }
  }

  renderItem = ({ index, item }) => {
    console.log(index,item)
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{item.title}</Text>
      </View>
    );
  }

  reachBottom = () => {
    alert('到底了')
  }

  loadData = () => {
    this.setState({
      isLoading: true
    })

    // 模拟网络请求
    setTimeout(() => {
      // 模拟请求数据
      alert('刷新请求数据')
      
      this.setState({
          isLoading: false,
      })
    }, 2000);
  }

  render() {
    return (
      <FlatList
        ListHeaderComponent={() => {
          return <View style={[styles.header]}>
          <Text style={{fontSize: 30}}>列表头部</Text>
          </View>
        }}
        stickyHeaderIndices={[0]}
        initialScrollIndex={0}
        data={this.state.list}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        ItemSeparatorComponent={() => {
          return <View style={{borderBottomWidth: 1, borderBottomColor: '#ccc', marginHorizontal: 10}}></View>;
        }}
        onEndReached={() => { this.reachBottom() } }
        onEndReachedThreshold={0.1}
        horizontal={false}
        numColumns={1}
        //下拉刷新
        refreshing={this.state.isLoading}
        onRefresh={() => {
          this.loadData(); // 下拉刷新加载数据
        }}
        // 设置刷新样式
        refreshControl={
          <RefreshControl
            title={"Loading"} //android中设置无效
            colors={["red"]} //android
            tintColor={"red"} //ios
            titleColor={"red"}
            refreshing={this.state.isLoading}
            onRefresh={() => {
                this.loadData(); //下拉刷新加载数据
            }}
          />
        }
        // ListFooterComponent={() => {
        //   return <Text style={[styles.footer]}>---- 没有更多了 ----</Text>
        // }}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  header: {
    fontSize: 20, 
    margin: 20
  },
  footer: {
    fontSize: 20, 
    textAlign: 'center', 
    marginVertical: 40
  }
});
